<template>
  <div class="booking-details">
    <!-- 顶部标题栏 -->
    <div class="details-header">
      <h2 class="page-title">预约详情</h2>
      <div class="booking-status">
        <span class="status-icon">✓</span>
        <span class="status-text">预约成功</span>
      </div>
    </div>

    <!-- 重要提示 -->
    <div class="notice-banner">
      <div class="notice-icon">⚠️</div>
      <div class="notice-content">
        <div class="notice-text">
          请合理安排行程，提前15分钟到场，逾期则视为放弃！
        </div>
      </div>
    </div>

    <!-- 保存提示区域 -->
    <div class="save-tip-section">
      <div class="save-tip-card">
        <div class="tip-icon">💾</div>
        <div class="tip-content">
          <div class="tip-title">为避免设备信息缺失</div>
          <div class="tip-subtitle">建议保存预约详情图片到相册</div>
        </div>
        <el-button type="primary" @click="generateImage" :loading="generating" class="generate-btn">
          {{ generating ? '生成中...' : '生成图片' }}
        </el-button>
      </div>
    </div>

    <!-- 详情内容 -->
    <div class="details-main">

      <!-- 门票信息 -->
      <div class="info-section">
        <h3 class="section-title">门票信息</h3>
        <div class="ticket-card">
          <div class="ticket-main">
            <div class="ticket-header">
              <h4 class="ticket-name">{{ ticketInfo.name }}</h4>
              <div class="ticket-badge">{{ ticketInfo.type }}</div>
            </div>
            <p class="ticket-desc">{{ ticketInfo.description }}</p>
            <div class="ticket-features">
              <div class="feature-item" v-for="feature in ticketInfo.features" :key="feature">
                <span class="feature-icon">✓</span>
                <span>{{ feature }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 预约信息 -->
      <div class="info-section">
        <h3 class="section-title">预约信息</h3>
        <div class="booking-info-card">
          <div class="info-grid">
            <div class="info-item">
              <div class="item-label">📅 预约日期</div>
              <div class="item-value">{{ bookingInfo.date }}</div>
            </div>
            <div class="info-item">
              <div class="item-label">🕐 体验时间</div>
              <div class="item-value">{{ bookingInfo.timeSlot }}</div>
            </div>
            <div class="info-item">
              <div class="item-label">👥 预约人次</div>
              <div class="item-value">{{ bookingInfo.visitorCount }}人</div>
            </div>
            <div class="info-item">
              <div class="item-label">🎫 预约编号</div>
              <div class="item-value booking-number">{{ bookingInfo.bookingNumber }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 观众信息 -->
      <div class="info-section">
        <h3 class="section-title">观众信息</h3>
        <div class="visitor-info-card">
          <div class="visitor-avatar">
            <div class="avatar-icon">👤</div>
          </div>
          <div class="visitor-details">
            <div class="visitor-name">{{ visitorInfo.name }}</div>
            <div class="visitor-meta">
              <span class="meta-item">{{ visitorInfo.gender }}</span>
              <span class="meta-divider">·</span>
              <span class="meta-item">{{ visitorInfo.age }}岁</span>
              <span class="meta-divider">·</span>
              <span class="meta-item">{{ visitorInfo.education }}</span>
            </div>
            <div class="visitor-extra" v-if="visitorInfo.occupation">
              <span class="extra-label">职业：</span>
              <span class="extra-value">{{ visitorInfo.occupation }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 重要提醒 -->
      <div class="info-section">
        <h3 class="section-title">重要提醒</h3>
        <div class="reminder-card">
          <div class="reminder-list">
            <div class="reminder-item">
              <span class="reminder-number">1</span>
              <div class="reminder-text">
                <h4>提前到场</h4>
                <p>请于体验时间前15分钟到达现场，逾期视为自动放弃</p>
              </div>
            </div>
            <div class="reminder-item">
              <span class="reminder-number">2</span>
              <div class="reminder-text">
                <h4>健康状态</h4>
                <p>请确保身体健康，患有心脏病、高血压、孕妇等不宜参与</p>
              </div>
            </div>
            <div class="reminder-item">
              <span class="reminder-number">3</span>
              <div class="reminder-text">
                <h4>特殊情况</h4>
                <p>如有特殊情况，请提前2小时联系我们：(020) 8521-8888</p>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>



    <!-- 底部操作按钮 -->
    <div class="action-section">
      <div class="action-buttons">
        <!-- <el-button 
          size="large" 
          @click="saveToCalendar"
          class="calendar-button"
        >
          📅 添加到日历
        </el-button> -->
        <el-button type="primary" size="large" @click="goBack" class="back-button">
          {{ backButtonText }}
        </el-button>
      </div>
      <p class="contact-info">如有疑问，请联系 (020) 8521-8888</p>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'

// 定义 props 接收预约数据
const props = defineProps({
  bookingData: {
    type: Object,
    default: () => ({})
  },
  fromProfile: {
    type: Boolean,
    default: false
  }
})

// 定义 emit 事件
const emit = defineEmits(['goBack'])

// 生成图片状态
const generating = ref(false)

// 门票信息
const ticketInfo = ref({
  name: '《永恒的高迪·圣家堂》VR沉浸体验',
  type: '免费体验',
  description: '完整的高迪圣家堂VR体验，包含建筑内部探索、工作室参观体验等多个场景',
  features: [
    '360度全景VR体验',
    '多场景互动探索',
    '专业设备提供',
    '现场技术指导'
  ]
})

// 预约信息（可以从props接收或使用模拟数据）
const bookingInfo = ref({
  date: '2025年06月20日 (周五)',
  timeSlot: '14:30-15:00',
  visitorCount: 1,
  bookingNumber: 'VR' + Date.now().toString().slice(-8)
})

// 观众信息（可以从props接收或使用模拟数据）
const visitorInfo = ref({
  name: '张三',
  gender: '男',
  age: '28',
  education: '本科',
  occupation: '软件工程师'
})

// 使用watch监听props变化并更新数据
watch(() => props.bookingData, (newData) => {
  if (newData && Object.keys(newData).length > 0) {
    if (newData.bookingInfo) {
      Object.assign(bookingInfo.value, newData.bookingInfo)
    }
    if (newData.visitorInfo) {
      Object.assign(visitorInfo.value, newData.visitorInfo)
    }
  }
}, { immediate: true })

// 如果有传入的预约数据，则使用传入的数据（兼容性代码）
if (props.bookingData && Object.keys(props.bookingData).length > 0) {
  if (props.bookingData.bookingInfo) {
    Object.assign(bookingInfo.value, props.bookingData.bookingInfo)
  }
  if (props.bookingData.visitorInfo) {
    Object.assign(visitorInfo.value, props.bookingData.visitorInfo)
  }
}

// 添加到日历
const saveToCalendar = () => {
  ElMessage.success('已为您生成日历提醒')
}

// 返回按钮文字
const backButtonText = computed(() => {
  return props.fromProfile ? '返回我的' : '返回首页'
})

// 生成预约详情图片
const generateImage = async () => {
  generating.value = true

  try {
    // 动态导入html2canvas
    const html2canvas = await import('html2canvas')

    // 获取要截图的元素
    const element = document.querySelector('.booking-details')

    if (!element) {
      ElMessage.error('未找到预约详情内容')
      return
    }

    // 配置选项
    const options = {
      useCORS: true,
      allowTaint: true,
      scale: 2, // 提高图片质量
      backgroundColor: '#ffffff',
      width: element.scrollWidth,
      height: element.scrollHeight,
      scrollX: 0,
      scrollY: 0,
      ignoreElements: (element) => {
        // 忽略生成按钮本身
        return element.classList?.contains('generate-btn') ||
          element.classList?.contains('action-section')
      }
    }

    // 生成canvas
    const canvas = await html2canvas.default(element, options)

    // 转换为图片并下载
    const link = document.createElement('a')
    link.download = `预约详情-${bookingInfo.value.bookingNumber || 'VR体验'}.png`
    link.href = canvas.toDataURL('image/png', 1.0)

    // 检查是否支持点击下载
    if (typeof link.download !== 'undefined') {
      // 触发下载
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)

      ElMessage.success('预约详情图片已保存')
    } else {
      // 如果不支持下载，在新窗口打开
      const newWindow = window.open()
      newWindow.document.write(`
        <html>
          <head><title>预约详情</title></head>
          <body style="margin:0;padding:20px;background:#f5f5f5;">
            <img src="${canvas.toDataURL()}" style="max-width:100%;height:auto;">
            <p style="text-align:center;color:#666;margin-top:20px;">
              请右键保存图片到相册
            </p>
          </body>
        </html>
      `)
      ElMessage.success('图片已生成，请右键保存')
    }

  } catch (error) {
    console.error('生成图片失败:', error)
    ElMessage.error('生成图片失败，请稍后重试')
  } finally {
    generating.value = false
  }
}

// 返回首页
const goBack = () => {
  emit('goBack')
}
</script>

<style scoped>
@import '../assets/css/booking/details.css';
</style>